<template>
  <div>
    <el-card>
      <div class="user-content" v-if='this.authorInfo'>
        <el-avatar :size="100" :src="authorInfo.tb_user.headimg"></el-avatar>
        <div class='user-info'>
          <div>
            <span class="user-username" v-text='authorInfo.tb_user.nick'></span>
            <p class="user-sign" v-text='authorInfo.tb_user.sign'></p>
          </div>
          <el-button v-if='!authorInfo.is_follow' type="primary" size="mini" @click='follow'>关注</el-button>
          <el-button v-if='authorInfo.is_follow' type="warning" size="mini" @click='follow'>已关注</el-button>
        </div>
        <div>
          <el-tag type="warning" size="mini">{{'LV.'+authorInfo.tb_user.lv.lv}}</el-tag>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { GetUrlParam } from '../../utils/getUrlParams'

export default {
  data () {
    return {
      // 删掉会报错
      authorInfo: { tb_user: { headimg: '', lv: { lv: 0 } } }
    }
  },
  created () {
    this.loadAuthor()
  },
  // DOM对象加载完成时
  mounted () {},
  methods: {
    async loadAuthor () {
      const url = this.$config.urls.get('load_author')
      await this.$http.get(url, { params: { articleId: GetUrlParam('articleid') } }).then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.error_message)
        }
        this.authorInfo = res.data.data
        console.log(this.authorInfo)
      }).catch(e => {
        console.log(e)
      })
    },
    async follow () {
      const url = this.$config.urls.get('user_follow')
      var type = this.authorInfo.is_follow ? 1 : 0
      await this.$http.post(url, { author_id: this.authorInfo.tb_user.id, article_id: GetUrlParam('articleid'), operation: type }).then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.error_message)
        }
        if (type === 0) {
          this.authorInfo.is_follow = true
        } else {
          this.authorInfo.is_follow = false
        }
      }).catch(e => {
        console.log(e)
      })
    }
  },
  computed: {},
  name: 'user',
  props: [],
  components: {}
}
</script>

<style lang="less" scoped>
.user-content{
  display:flex;
  justify-content: space-between;
}
.user-info{
  width: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  align-content: center;
}
.user-username{
  font-size: 15px;
  font-weight: 600;
  color: #999999;
}
.user-sign{
  font-size: 12px;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
  display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /* 文本需要显示多少行 */
}
</style>
